<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>填写基本信息</title>
    
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link href="../lib/fonts/material-icons.css?family=Material+Icons" rel="stylesheet">
    <link href="../lib/css/animate.min.css" rel="stylesheet">
    <link href="../lib/css/quasar.mat.rtl.min.css" rel="stylesheet" type="text/css">
    <!-- yn-tree -->
    <link rel="stylesheet" href="../lib/ynTree/ynTree.css">
    <style>
      .layui-form-checkbox i {
        position: absolute;
        right: 0;
        top: 0;
        width: 30px;
        height: 30px;
        border: 1px solid #d2d2d2;
        border-left: none;
        border-radius: 0 2px 2px 0;
        color: #fff;
        font-size: 20px;
        text-align: center;
      }
      .layui-form-select {
          width: 200px;
          display: inline-block
      }
    </style>
</head>
<body>
  <div id="q-registerWriteBaseInfo">
    <q-stepper class="no-shadow" v-model="currentStep" ref="supplierInviteStepper" color="primary" contractable no-header-navigation style="min-height:700px">
      <q-step name="register" title="用户注册" >
        
      </q-step>
      <q-step name="writeBaseInfo" title="填写基本信息">
          <div id="messageCon" style="width:800px;margin: 0 auto 15px;display:none;border: 2px dotted #e6e6e6;padding: 10px 15px">
              账号：<span id="loginAccount"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              密码：<span id="loginPassword"></span>
          </div>
        <div id="formCon" style="width:800px;margin: 0 auto">
            
        </div>
      </q-step>
      <q-step name="regsiterResult" title="注册结果" >

      </q-step>
    </q-stepper>
  </div>
        
    
    
    <script src="../lib/js/jquery-2.2.4.min.js"></script>
    <script src="../lib/layui/layui.js"></script>
    <script src="../lib/jilian/data.js"></script>
    <script src="../lib/jilian/province.js"></script>
    <script src="../lib/js/jquery.form.js"></script>
    <!-- ie-polyfill 、 vue.js and quasar-framework -->
    <script src="../lib/js/quasar.ie.polyfills.umd.min.js"></script>
    <script src="../lib/js/vue.js"></script>
    <script src="../lib/js/quasar.mat.umd.min.js"></script>
    <!-- consts ps: always leave this file first -->
    <script src="../script/consts.js"></script>
    <!-- status code -->
    <script src="../script/status.code.js"></script>
    <script src="../script/utils.js"></script>
    <!-- yn-tree -->
    <!-- 源码已被修改 取消反选、全选  去除所有父节点的checkbox 详情在源码里有备注 -->
    <script src="../lib/ynTree/ynTree.js"></script>
    <script>
        // quasar components use
        // Quasar.i18n.set(Quasar.i18n[LANGUGE])

        new Vue({
          el: '#q-registerWriteBaseInfo',
          data: function() {
            return {
              currentStep: 'writeBaseInfo',
            }
          }
        })
    </script>
    <script type="text/javascript">
        
        $(document).ready(function() {
          var TOKEN = GetRequest()
          formHtmlRender.getHtml(TOKEN)
        })
        layui.config({
            base: '../lib/js/'
        }).extend({
            formSelects: 'formSelects-v3'
        })
        var currentLayer
        var formHtmlRender = {
            // init
            getHtml: function(TOKEN) {
                layui.use(['form', 'layer', 'laydate', 'upload', 'formSelects', 'laytpl'], function() {
                    var form = layui.form
                    var laydate = layui.laydate
                    var layer = layui.layer
                    var upload = layui.upload
                    var formSelects = layui.formSelects
                    var laytpl = layui.laytpl
                    
                    currentLayer = layer.load(0, {
                        shade: [0.1,'#fff'] //0.1透明度的白色背景
                    })
                    // TOKEN = sessionStorage.getItem("TOKEN").split('|')[1]  // quasar 封装的sessionStorage和 jQuery有区别  这里稍做处理
                    $.ajax({
                        type: 'post',
                        url: baseURL + '/public/new/register/produceForm?userToken=' + TOKEN.userToken,
                        dataType: 'json',
                        contentType: 'application/json;charset=utf-8',
                        success: function(data) {
                            
                            if (data.statusCode == 200) {
                                if (data.statusSingle.registerStatus == 2) {
                                    var _optionHtml = '<div class="row justify-center">'+
                                                    '<img src="../static/img/done.png" style="width:400px;height:400px" />'+
                                                '</div>'+
                                                '<h6 class="q-mt-sm" style="text-align:center">提交成功！等待前途汽车审核。</h6>'+
                                                '<hr class="layui-bg-blue">'+
                                                '<div class="layui-row" style="text-align:center;margin-top:15px">'+ 
                                                    '<button class="layui-btn layui-btn-primary layui-btn-sm" onclick="formHtmlRender.backToLogin()">返回登录</button>'+
                                                '</div>'
                                    $('#formCon').append(_optionHtml)
                                }
                                else if (data.statusSingle.registerStatus == 3) {
                                    // alert('采方审核通过！账号为data.single2.loginName,密码为 data.single2.password')
                                    var _optionHtml = '<div class="row justify-center">'+
                                                    '<img src="../static/img/done.png" / style="width:400px;height:400px">'+
                                                '</div>'+
                                                '<h6 class="q-mt-sm" style="text-align:center">前途汽车审核通过'+
                                                    '<p>账号为：' + data.single2.loginName + '</p>' +
                                                    '<p>密码为' + data.single2.password + '</p>' +
                                                '</h6>'+
                                                '<hr class="layui-bg-blue">'+
                                                '<div class="layui-row" style="text-align:center;margin-top:15px">'+ 
                                                    '<button class="layui-btn layui-btn-primary layui-btn-sm" onclick="formHtmlRender.backToLogin()">返回登录</button>'+
                                                '</div>'
                                    $('#formCon').append(_optionHtml)
                                }
                                else if (data.statusSingle.registerStatus == 4) {
                                    layer.alert('注册信息已被驳回，请修改后重新提交审批！', {
                                        skin: 'layui-layer-molv',
                                        closeBtn: 0
                                    })
                                    $('#formCon').append(data.single.content)
                                }
                                else {
                                    $('#formCon').append(data.single.content)
                                    $('#messageCon').show()
                                    $('#loginAccount').html(data.statusSingle.registerAccount)
                                    $('#loginPassword').html(data.statusSingle.registerPassword)
                                }
                            }
                            // TODO: 错误提示
                            $('input').map(function(index, item) {
                                var _id = $(item).attr('id')
                                if (_id != undefined || _id != null) {
                                    if (_id.indexOf('datePicker-') > -1) {
                                        console.log(_id)
                                        laydate.render({
                                            elem: '#' + _id, //指定元素
                                            type: 'datetime'
                                        })
                                    }
                                }
                            })
                            // 执行 三级级联
                            $('.placePicker').map(function(index, item) { // 取得包裹元素
                                var country = '', province = '', city = ''  // 国家省份城市 选择的值
                                var place = ''  // 三者合并的值
                                // 如果有值  则回显
                                var hiddenInput = $(item).find('input[type="hidden"]')
                                if ($(hiddenInput).val()!=undefined && $(hiddenInput).val()!=null) {
                                    country = $(hiddenInput).val().split(',')[0]
                                    province = $(hiddenInput).val().split(',')[1]
                                    city = $(hiddenInput).val().split(',')[2]
                                }
                                $(item).find('select').map(function(index2, item2) {  // 遍历select
                                    var _selector = $(item2).attr('lay-filter')
                                    var _filter = 'select(' + _selector +')'
                                    var _num = _selector.split('-')[1]  // 记录id后的随机数
                                    if (_selector.indexOf('country-') > -1) { // 不同层不同事件
                                        if (country != '') {
                                            // 取得回显国家下 省份的值 
                                            $('#'+_selector).val(country).trigger('change')
                                            $.ajax({
                                                type: 'post',
                                                url:  $('#'+_selector).attr('data-url') + country,
                                                dataType: 'json',
                                                contentType: 'application/json;charset=utf-8',
                                                success: function(data) {
                                                    if (data.length > 0) {
                                                        var _optionHtml = '<option value="">请选择省份</>'
                                                        data.map(function(province) {
                                                            _optionHtml += '<option value="' + province.id + '">'
                                                            _optionHtml +=    province.name
                                                            _optionHtml += '</option>'
                                                        })
                                                        $('#province-' + _num).html(_optionHtml)
                                                        // 回显省份
                                                        $('#province-' + _num).val(province).trigger('change')
                                                    } else {
                                                        $('#province-' + _num).html('<option value="">无可选的省份</option>')
                                                        $('#city-' + _num).html('<option value="">无可选的城市</option>')
                                                    }
                                                    form.render('select')
                                                },
                                                error: function(err) {

                                                }
                                            })
                                       }
                                        // 监听国家的变化  取得对应的省份
                                        form.on(_filter, function(data){  
                                            country = data.value
                                            $.ajax({
                                                type: 'post',
                                                url: $(data.elem).attr('data-url') + data.value,
                                                dataType: 'json',
                                                contentType: 'application/json;charset=utf-8',
                                                success: function(data) {
                                                    if (data.length > 0) {
                                                        var _optionHtml = '<option value="">请选择省份</>'
                                                        data.map(function(province) {
                                                            _optionHtml += '<option value="' + province.id + '">'
                                                            _optionHtml +=    province.name
                                                            _optionHtml += '</option>'
                                                        })
                                                        $('#province-' + _num).html(_optionHtml)
                                                    } else {
                                                        $('#province-' + _num).html('<option value="">无可选的省份</option>')
                                                        $('#city-' + _num).html('<option value="">无可选的城市</option>')
                                                    }
                                                    form.render('select')
                                                },
                                                error: function(err) {

                                                }
                                            })
                                            place = country + ',' + province + ',' + city
                                            // 将当前选择的赋值给隐藏的Input
                                            formHtmlRender.placeValue(place, item)
                                        })
                                    }
                                    if (_selector.indexOf('province-') > -1) { // 不同层不同事件
                                        if (province != '') {
                                            // 取得回显国家下 省份的值 
                                            $('#'+_selector).val(province).trigger('change')
                                            $.ajax({
                                                type: 'post',
                                                url:  $('#'+_selector).attr('data-url') + province,
                                                dataType: 'json',
                                                contentType: 'application/json;charset=utf-8',
                                                success: function(data) {
                                                    if (data.length > 0) {
                                                        var _optionHtml = '<option value="">请选择城市</>'
                                                        var __selector = '#' + _selector
                                                        data.map(function(city) {
                                                            _optionHtml += '<option value="' + city.id + '">'
                                                            _optionHtml +=    city.name
                                                            _optionHtml += '</option>'
                                                        })
                                                        $('#city-' + _num).html(_optionHtml)
                                                        // 回显城市
                                                        $('#city-' + _num).val(city).trigger('change')
                                                    } else {
                                                        $('#city-' + _num).html('<option value="">无可选的城市</option>')
                                                    }
                                                    form.render('select')
                                                },
                                                error: function(err) {

                                                }
                                            })
                                        }
                                        form.on(_filter, function(data){  
                                            province = data.value
                                            $.ajax({
                                                type: 'post',
                                                url: $(data.elem).attr('data-url') + data.value,
                                                dataType: 'json',
                                                contentType: 'application/json;charset=utf-8',
                                                success: function(data) {
                                                    if (data.length > 0) {
                                                        var _optionHtml = '<option value="">请选择城市</>'
                                                        var __selector = '#' + _selector
                                                        data.map(function(city) {
                                                            _optionHtml += '<option value="' + city.id + '">'
                                                            _optionHtml +=    city.name
                                                            _optionHtml += '</option>'
                                                        })
                                                        $('#city-' + _num).html(_optionHtml)
                                                    } else {
                                                        $('#city-' + _num).html('<option value="">无可选的城市</option>')
                                                    }
                                                    form.render('select')
                                                },
                                                error: function(err) {

                                                }
                                            })
                                            place = country + ',' + province + ',' + city
                                            // 将当前选择的赋值给隐藏的Input
                                            formHtmlRender.placeValue(place, item)
                                        })
                                    }
                                    if (_selector.indexOf('city-') > -1) { // 不同层不同事件
                                        form.on(_filter, function(data){  
                                            city = data.value
                                            place = country + ',' + province + ',' + city
                                            // 将当前选择的赋值给隐藏的Input
                                            formHtmlRender.placeValue(place, item)
                                        })
                                    }
                                })
                            
                            })
                            //执行实例 文件上传
                            $('.fileUpload').map(function(index, item) {
                                $(item).find('button').map(function(index2, item2) {
                                var _selector = $(item2).attr('id')
                                upload.render({
                                    elem: '#' + _selector,
                                    url: baseURL + '/manager/apqp/index/uploadOperateNew', //上传接口
                                    method: 'post',
                                    field: 'files',
                                    accept: 'file',
                                    done: function(data){
                                        //上传完毕回调
                                        console.log(data)
                                        var downloadUrl = '', downloadName = ''
                                        if (data.path != null && data.name != null) {
                                            var _filename = encodeURI(encodeURIComponent(data.path.split('.')[0]))
                                            downloadUrl = baseURL + '/common/download/' + _filename + '/' + data.path.split('.')[1]
                                            downloadName = data.name
                                        } 
                                        // $('input[data-name='+_selector+']').val(data.name)
                                        $('input[data-path='+_selector+']').val(downloadUrl)
                                        if (data.success) {
                                            layer.msg('上传成功', {icon: 6})
                                        }
                                        if (data.error) {
                                            layer.msg(data.msg, {icon: 5})
                                        }
                                        $(item).find('a').attr('href', downloadUrl)
                                        $(item).find('a').html(downloadName)
                                    },
                                    error: function(){
                                    //请求异常回调
                                    }
                                })
                                })
                            })
                            // 自定义验证 
                            form.verify({
                                username: function(value, item){ //value：表单的值、item：表单的DOM对象
                                    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                                        return '用户名不能有特殊字符';
                                    }
                                    if(/(^\_)|(\__)|(\_+$)/.test(value)){
                                        return '用户名首尾不能出现下划线\'_\'';
                                    }
                                    if(/^\d+\d+\d$/.test(value)){
                                        return '用户名不能全为数字';
                                    }
                                },
                                mustChecked: function(value, item) {
                                    var elem = $(item).find('div.layui-form-checked')
                                    if (elem.length == 0) {
                                        return '至少选中一项'
                                    }
                                },
                                phone: function(value, item) {
                                    if(!/^[1][3,4,5,6,7,8][0-9]{9}$/.test(value)){
                                        return '手机号码格式有误';
                                    }
                                },
                                fax: function(value, item) {
                                    if (!/^(\d{3,4}-)?\d{7,8}$/.test(value)) {
                                        return '传真格式有误'
                                    }
                                },
                                number: function(value, item) {
                                    if (!/^\d+(\.\d+)?$|^$/.test(value)) {
                                        return '只能填写数字'
                                    }
                                }
                            })
                            form.render()
                            layer.close(currentLayer)
                        },
                        error: function(err) {
                            console.log(err);
                        }
                    })
                })
            },
            formSubmitHandler: function(arg) {
                currentLayer = layer.load(0, {
                    shade: [0.1,'#fff'] //0.1透明度的白色背景
                })
                var TOKEN = GetRequest()
                $('#addChildTaskForm').ajaxForm({
                    type: 'post',
                    dataType: 'json',
                    data: {
                      userToken: TOKEN.userToken,
                      mapFormInputTyppeCode: arg
                    },
                    success: function(data){
                        if (data.statusCode == 200) {
                            // 刷新页面
                            window.location.reload()
                        }
                        layer.close(currentLayer)
                    },
                    error: function() {
                        layer.close(currentLayer)
                    }
                })
                layer.close(currentLayer)
            },
            formSaveHandler: function(arg) {
                layui.use(['layer'], function() {
                    var layer = layui.layer
                    var TOKEN = GetRequest()
                    currentLayer = layer.load(0, {
                        shade: [0.1,'#fff'] //0.1透明度的白色背景
                    })
                    $('#addChildTaskForm').ajaxSubmit({
                        type: 'post',
                        dataType: 'json',
                        data: {
                        userToken: TOKEN.userToken,
                        mapFormInputTyppeCode: arg
                        },
                        success: function(){
                            if (data.statusCode == 200) {
                                layer.msg('保存成功！')
                            }
                            layer.close(currentLayer)
                        },
                        error: function() {
                            
                        }
                    })
                })
            },
            backToLogin: function() {
                window.location.href = baseURL + '/public/login'
            },
            openMeterialTypeModal: function(url, id) {
                layui.use(['layer'], function() {
                    var layer = layui.layer
                    var meterialData
                    // [
                    //     {
                    //         name: "系统管理",
                    //         value: "系统管理"
                    //     },
                    //     {
                    //         name: "我的公司",
                    //         inputName: "company",
                    //         value: "我的公司",
                    //         // children: [
                    //         //     {
                    //         //         name: "公司管理",
                    //         //         inputName: "company manage",
                    //         //         value: "公司管理"
                    //         //     },
                    //         //     {
                    //         //         name: "部门管理",
                    //         //         inputName: "department manage",
                    //         //         value: "部门管理"
                    //         //     }
                    //         // ]
                    //     }
                    // ]
                    
                    // 这是数据
                    
                    $.ajax({
                        type: 'post',
                        url: url,
                        dataType: 'json',
                        async: false,
                        contentType: 'application/json;charset=utf-8',
                        success: function(data) {
                            meterialData = data.rows
                        },
                        error: function(err) {
                          console.log(err);
                        }
                    })
                    currentLayer = layer.open({
                        type: 1,
                        title: '物料分类',
                        skin: 'layui-layer-rim', //加上边框
                        area: ['50%',"80%"], //宽高
                        content: 
                        '<div style="padding:15px">'+
                            '<div class="layui-row">'+
                                '<div style="margin-left:15px">'+
                                    '<button id="saveTo" class="layui-btn layui-btn-normal layui-btn-sm">保存</button>'+
                                    '<button id="close" class="layui-btn layui-btn-primary layui-btn-sm">取消</button>'+
                                '</div>'+
                            '</div>'+
                            '<div id="tree" class=" fl tree" style="margin-top:15px"></div>'+
                        '</div>',
                        success: function() {
                            var currentData
                            var selectorName = '#' + id
                            var selectorIds = '#' + id + 'hidden'
                            var options = {
                                checkStrictly: true,
                                data: meterialData,
                                onchange: function(i, obj) {
                                }
                            };
                            var meterialTree = new YnTree( document.getElementById('tree'), options)
                            // 设置默认选中 
                            if ($(selectorIds).val()) {
                                $(selectorIds).val().split(',').map(function(item) {
                                    meterialTree.select(item, true)
                                    // $('.checkbox').find('input[type="checkbox"]').map(function(index2, item2) {
                                    //     if (item1 == $(item2).attr('value')) {
                                    //         $(item2).attr('checked', 'checked')
                                    //     }
                                    // })
                                })
                            }
                            $('#saveTo').on('click', function() {
                                // 取得选中的Id
                                var selectedIds = meterialTree.getValues()
                                // var selectedIds = []
                                // $('.checkbox').find('input[checked="checked"]').map(function(index, item) {
                                //     selectedIds.push($(item).attr('value'))
                                // })
                                // 遍历取得已选name 
                                var selected = meterialTree.getCheckedInputs()
                                var selectedName = []
                                // $('.checkbox').find('input[checked="checked"]').map(function(index, item) {
                                //     selectedName.push($(item).parent().parent().text().trim())
                                    
                                // })
                                selected.map(function(item) {
                                    selectedName.push($(item).parent().parent().text().trim())
                                })
                                $(selectorName).val(selectedName.join(','))
                                $(selectorIds).val(selectedIds.join(','))
                                layer.close(currentLayer)
                            })
                            $('#close').on('click', function() {
                                layer.close(currentLayer)
                            })
                        }
                    })
                })
            },
            // 级联 赋值
            placeValue: function(place) {
                $('.placePicker').map(function(index, item) {
                    $(item).find('input[type="hidden"]').map(function(index, item) {
                        var _selector = $(item).attr('class')
                        if (_selector.indexOf('hidden') > -1) {
                            $('.'+_selector).val(place)
                        }
                    })
                })
            }
        }
    </script>
</body>
</html>